export default {
  name: 'Login',
  props: { loading: { type: Boolean, default: false } },
  data: () => ({ viewpwd: false, username: '', password: '' }),
  render(h: any) {
    return h('section', { class: 'flex flex-col md:flex-row h-screen items-center' }, [
      h('div', { class: 'bg-white w-full h-screen px-6 flex items-center justify-center' }, [
        h('div', { class: 'w-[460px] mx-auto h-100' }, [
          h('div', { class: 'mt-6' }, [
            h('div', null, [
              h('label', { class: 'block text-gray-700' }, '账号'),
              h('input', {
                class:
                  'w-full px-4 py-3 bg-gray-200 mt-2 border focus:border-blue-500 focus:bg-white focus:outline-none',
                attrs: {
                  placeholder: '输入登录账号',
                  autofocus: true,
                  autocomplete: true,
                  required: true
                },
                domProps: { value: this.username },
                on: { input: (event: any) => (this.username = event.target.value.trim()) }
              })
            ]),

            h('div', { class: 'mt-4' }, [
              h('label', { class: 'block text-gray-700' }, '密码'),
              h('input', {
                class:
                  'w-full px-4 py-3 bg-gray-200 mt-2 border focus:border-blue-500 focus:bg-white focus:outline-none',
                attrs: {
                  placeholder: '输入密码',
                  required: true,
                  type: this.viewpwd ? 'text' : 'password'
                },
                domProps: { value: this.password },
                on: { input: (event: any) => (this.password = event.target.value.trim()) },
                nativeOn: {
                  keydown: (e: any) => {
                    if (e.keyCode === 13) {
                      this.$emit('submit', { username: this.username, password: this.password })
                    }
                  }
                }
              })
            ]),

            h(
              'button',
              {
                class: ['w-full !mt-[30px] bg-[#131315] text-[#fff] p-[10px]', { 'cursot-not-allowed': this.loading }],
                attrs: { disabled: this.loading },
                on: { click: () => this.$emit('submit', { username: this.username, password: this.password }) }
              },
              this.loading ? '登录中' : '登录'
            )
          ])
        ])
      ])
    ])
  }
}
